<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Squadfree - Free bootstrap 3 one page template</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/animate.css" rel="stylesheet"/>
    <!-- Squad theme CSS -->
    <link href="css/style.css" rel="stylesheet">
    <link href="color/default.css" rel="stylesheet">


    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.scrollTo.js" type="text/javascript"></script>
    <script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function($){

            $('.thumbnail').hover(function () {
                $(".caption", this).stop().animate({top: '0px'}, {queue: false, duration: 160});
            }, function () {
                $(".caption", this).stop().animate({top: '260px'}, {queue: false, duration: 160});
            });
            $('#intro').bind('mousewheel', function (event, delta, deltaX, deltaY) {
                if (delta == -1) {
                    var $this = $(this),
                            timeoutId = $this.data('timeoutId');
                    if (timeoutId) {
                        clearTimeout(timeoutId);
                    }
                    $this.data('timeoutId', setTimeout(function () {
                        //do something
                        var height = $("#intro").height() - 100;

                        $.scrollTo(height, 1200);

                        $this.removeData('timeoutId');
                        $this = null
                    }, 600));
                    return false;
                }
            });
        })
    </script>
</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<!-- Preloader -->
<div id="preloader">
    <div id="load"></div>
</div>

<!--原导航条-->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header page-scroll">
            <!--<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">-->
                <!--<i class="fa fa-bars"></i>-->
            <!--</button>-->
            <a class="navbar-brand" href="index.html">
                <img src="img/logo.png" alt="KVV棋牌">
            </a>
        </div>
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse">

            <button class="btn  "
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <!--<div class="collapse navbar-collapse navbar-right navbar-main-collapse">-->
        <!--<ul class="nav navbar-nav">-->
        <!--<li class="active"><a href="#intro">Home</a></li>-->
        <!--<li><a href="#about">About</a></li>-->
        <!--<li><a href="#service">Service</a></li>-->
        <!--<li><a href="#contact">Contact</a></li>-->
        <!--<li class="dropdown">-->
        <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>-->
        <!--<ul class="dropdown-menu">-->
        <!--<li><a href="#">Example menu</a></li>-->
        <!--<li><a href="#">Example menu</a></li>-->
        <!--<li><a href="#">Example menu</a></li>-->
        <!--</ul>-->
        <!--</li>-->
        <!--</ul>-->
        <!--</div>-->
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

<!-- Section: intro -->
<section id="intro" class="intro">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="img/bg3.jpg" alt="...">
                <div class="carousel-caption">
                    --- 说明文字1 ---
                </div>

            </div>

            <div class="item">
                <img src="img/bg2.jpg" alt="...">
                <div class="carousel-caption">
                    --- 说明文字2 ---
                </div>

            </div>

            <div class="item">
                <img src="img/bg1.jpg" alt="...">
                <div class="carousel-caption">
                    --- 说明文字3 ---
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <div class="slogan">
        <h2>WELCOME TO <span class="text_color">SQUAD</span></h2>
        <h4>WE ARE GROUP OF GENTLEMEN MAKING AWESOME WEB WITH BOOTSTRAP</h4>
    </div>

</section>
<!-- /Section: intro -->


<!-- Section: content -->
<section id="content" class="home-section text-center">
    <div class="heading-content">
        <div class="container">
            <div class="row">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="col-lg-3 active"><a href="#game" data-toggle="tab">游戏下载</a></li>
                    <li class="col-lg-3"><a href="#buy" data-toggle="tab">商品购买</a></li>
                    <li class="col-lg-3"><a href="#help" data-toggle="tab">帮助中心</a></li>
                    <li class="col-lg-3"><a href="#about" data-toggle="tab">关于我们</a></li>
                </ul>

                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane animated bounceIn active" id="game">
                        <div class="row">
                            <div class="gameitem col-sm-6 col-md-3">
                                <div class="thumbnail">
                                    <img src="img/gameitem.jpg" alt="...">
                                    <div class="caption">
                                        <h3>嘿嘿嘿</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="gameitem col-sm-6 col-md-3">
                                <div class="thumbnail">
                                    <img src="img/gameitem.jpg" alt="...">
                                    <div class="caption">
                                        <h3>嘿嘿嘿</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="gameitem col-sm-6 col-md-3">
                                <div class="thumbnail">
                                    <img src="img/gameitem.jpg" alt="...">
                                    <div class="caption">
                                        <h3>嘿嘿嘿</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="gameitem col-sm-6 col-md-3">
                                <div class="thumbnail">
                                    <img src="img/gameitem.jpg" alt="...">
                                    <div class="caption">
                                        <h3>嘿嘿嘿</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane animated bounceIn" id="buy">
                        <div class="row">
                            <div class="col-lg-4 col-lg-offset-2">
                                <img src="img/chatu1.png" alt="">
                            </div>
                            <div class="col-lg-4 col-lg-offset-1">
                                <div class="title">
                                    <h2>什么东西放这里</h2>
                                    <h2 class="price"><i>￥</i>29</h2>
                                </div>
                                <div class="col-lg-6">
                                    <div class="input-group">
     <span class="input-group-btn">
       <button class="btn btn-default" type="button">-</button>
     </span>
                                        <input type="text" class="form-control" placeholder="2">
     <span class="input-group-btn">
       <button class="btn btn-default" type="button">+</button>
     </span>
                                    </div>
                                </div>
                                <div class="">
                                    <div class="btn-group" role="group" aria-label="...">
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-default">加入购物车</button>
                                        </div>
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-warning">购买</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                </div>
                <div class="tab-pane animated bounceIn" id="help">
                    帮助中心
                </div>
                <div class="tab-pane animated bounceIn" id="about">
                    关于我们
                </div>
            </div>

            <script>
                $(function () {
                    $('#myTab li:eq(0) a').tab('show');
                });
            </script>

        </div>
    </div>
    </div>
</section>
<!-- /Section: content -->

<!-- Section: contact -->

<section id="contact" class="home-section text-center">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="boxed-grey">
                    <form id="contact-form">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name">
                                        Name</label>
                                    <input type="text" class="form-control" id="name" placeholder="Enter name"
                                           required="required"/>
                                </div>
                                <div class="form-group">
                                    <label for="email">
                                        Email Address</label>
                                    <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
                                </span>
                                        <input type="email" class="form-control" id="email" placeholder="Enter email"
                                               required="required"/></div>
                                </div>
                                <div class="form-group">
                                    <label for="subject">
                                        Subject</label>
                                    <select id="subject" name="subject" class="form-control" required="required">
                                        <option value="na" selected="">Choose One:</option>
                                        <option value="service">General Customer Service</option>
                                        <option value="suggestions">Suggestions</option>
                                        <option value="product">Product Support</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name">
                                        Message</label>
                            <textarea name="message" id="message" class="form-control" rows="9" cols="25"
                                      required="required"
                                      placeholder="Message"></textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-skin pull-right" id="btnContactUs">
                                    Send Message
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="widget-contact">
                    <h5>Main Office</h5>

                    <address>
                        <strong>Squas Design, Inc.</strong><br>
                        Tower 795 Folsom Ave, Beautiful Suite 600<br>
                        San Francisco, CA 94107<br>
                        <abbr title="Phone">P:</abbr> (123) 456-7890
                    </address>

                    <address>
                        <strong>Email</strong><br>
                        <a href="mailto:#">email.name@example.com</a>
                    </address>
                    <address>
                        <strong>We're on social networks</strong><br>
                        <ul class="company-social">
                            <li class="social-facebook"><a href="#" target="_blank"><i class="fa fa-facebook"></i></a>
                            </li>
                            <li class="social-twitter"><a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
                            </li>
                            <li class="social-dribble"><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a>
                            </li>
                            <li class="social-google"><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a>
                            </li>
                        </ul>
                    </address>

                </div>
            </div>
        </div>

    </div>
</section>
<!-- /Section: contact -->

<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-lg-12">
                <div class="wow shake" data-wow-delay="0.4s">
                    <div class="page-scroll marginbot-30">
                        <a href="#intro" id="totop" class="btn btn-circle">
                            <i class="fa fa-angle-double-up animated"></i>
                        </a>
                    </div>
                </div>
                <p>&copy;Copyright 2014 - Squad. All rights reserved.</p>
            </div>
        </div>
    </div>
</footer>

<!-- Core JavaScript Files -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/wow.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/custom.js"></script>

</body>

</html>
